<template>
    <footer class="footer">
			<span class="todo-count"><strong>{{total}}</strong> 条</span>
			<ul class="filters">
				<li><a @click="filterData(0)" :class="{selected:selIndex==0}" href="#/">所有</a></li>
				<li><a @click="filterData(1)" :class="{selected:selIndex==1}" href="#/active">进行中</a></li>
				<li><a @click="filterData(2)" :class="{selected:selIndex==2}" href="#/completed">完成</a></li>
			</ul>
			<button @click="clear" class="clear-completed">清除完成事项</button>
		</footer>
</template>
<script>
export default {
	data(){
		return{
			selIndex:0
		}
	},
	methods:{
		clear(){
			this.$emit("clear");
		},
		filterData(index){
			this.selIndex=index;
			this.$emit("screening",index);
		}
	},
	props:{
		total:{
			type:Number,
			default:0
		}
	}
}
</script>

<style>

</style>